<template>
  <div class="time-line">
    <n-card class="card-default" title="默认时间线" size="medium">
      <pro-time-line
        :optionList="optionList1"
        :setting="setting1"
        class="pro-time-line-default"
      >
      </pro-time-line>
      <pro-time-line :optionList="optionList2" :setting="setting2">
      </pro-time-line>
    </n-card>

    <n-card class="card-icon" title="自定义图标" size="medium">
      <pro-time-line :optionList="optionList3" :setting="setting3">
      </pro-time-line>
    </n-card>

    <n-card class="card-slot-default" title="使用统一格式插槽" size="medium">
      <pro-time-line :optionList="optionList4" :setting="setting4">
        <template #content="{ option, iconColor }">
          <div class="card-slot-default-content">
            <strong>统一使用一个格式的插槽</strong>
            <p>
              <span>类型: {{ option.type }}</span>
            </p>
            <p>
              <span>内容: {{ option.string }}</span>
            </p>
            <p>
              <span>时间: {{ option.time }}</span>
            </p>
            <p>
              <span style="margin-right: 10px">图标:</span>
              <icons
                :name="option.iconName"
                size="16"
                :fill="iconColor[option.type]"
              />
            </p>
          </div>
        </template>
      </pro-time-line>
    </n-card>

    <n-card class="card-slot-status" title="使用不同状态插槽" size="medium">
      <pro-time-line :optionList="optionList5" :setting="setting5">
        <template #default="{ option, iconColor }">
          <div :style="{ color: iconColor[option.type] }">
            <p>状态: {{ option.type }}</p>
          </div>
        </template>
        <template #info="{ option, iconColor }">
          <div :style="{ color: iconColor[option.type] }">
            <p>状态: {{ option.type }}</p>
            <p>{{ option.string }}</p>
          </div>
        </template>
        <template #warning="{ option, iconColor }">
          <div :style="{ color: iconColor[option.type] }">
            <p>状态: {{ option.type }}</p>
            <p>{{ option.string }}</p>
            <p>{{ option.iconName }}</p>
          </div>
        </template>
        <template #success="{ option, iconColor }">
          <div :style="{ color: iconColor[option.type] }">
            <p>状态: {{ option.type }}</p>
            <p>{{ option.string }}</p>
            <p>{{ option.iconName }}</p>
            <p>{{ option.title }}</p>
          </div>
        </template>
      </pro-time-line>
    </n-card>

    <n-card class="card-slot-header" title="使用头部和底部插槽" size="medium">
      <pro-time-line :optionList="optionList6" :setting="setting6">
        <template #header="{ option, iconColor }">
          <div
            :style="{
              border: `2px solid ${iconColor[option.type]}`,
              borderRadius: '5px',
              padding: '0 5px'
            }"
          >
            <p>头部信息</p>
            <p>
              我的状态：<span :style="{ color: iconColor[option.type] }">
                {{ option.title }}</span
              >
            </p>
          </div>
        </template>
        <template #footer="{ option, iconColor }">
          <div
            :style="{
              border: `2px solid ${iconColor[option.type]}`,
              borderRadius: '5px',
              padding: '0 5px'
            }"
          >
            <p>底部信息</p>
            <p>
              时间：<span :style="{ color: iconColor[option.type] }">
                {{ option.time }}</span
              >
            </p>
          </div>
        </template>
      </pro-time-line>
    </n-card>
  </div>
</template>

<script lang="ts" setup name="timeLine">
import { status } from '~/types/timeLine'
import {
  optionList1,
  setting1,
  optionList2,
  setting2,
  optionList3,
  setting3,
  optionList4,
  setting4,
  optionList5,
  setting5,
  optionList6,
  setting6,
  optionList7,
  setting7,
  optionList8,
  setting8
} from './setting'
</script>

<style lang="less" scoped>
.time-line {
  :deep(.n-card) {
    margin-bottom: 10px;
  }
}
.card-default {
  :deep(.n-card__content) {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .pro-time-line-default {
    margin-bottom: 20px;
  }
}
.card-icon,
.card-slot-default,
.card-slot-status,
.card-slot-header {
  :deep(.n-card__content) {
    display: flex;
    justify-content: center;
  }
}
.card-slot-default {
  .card-slot-default-content {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid var(--primary-color);
  }
}
</style>
